<template>
    <div>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item>
                    <i class='el-icon-lx-cascades'></i> 评测记录
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='handle-box'>
                <el-select v-model='query.state' placeholder='提交状态' class='handle-select mr10'>
                    <el-option key='1' label='Accepted' value='Accepted'></el-option>
                    <el-option key='2' label='Wrong Answer' value='Wrong Answer'></el-option>
                    <el-option key='3' label='Runtime Error' value='Runtime Error'></el-option>
                    <el-option key='4' label='Time Limit Exceed' value='Time Limit Exceed'></el-option>
                    <el-option key='5' label='Memory Limit Exceed' value='Memory Limit Exceed'></el-option>
                </el-select>
                <el-input v-model='query.name' placeholder='用户名' class='handle-input mr10'></el-input>
                <el-button type='primary' icon='el-icon-search' @click='handleSearch' class='btn'>
                </el-button>
                <el-button type='primary' icon='el-icon-refresh' style='position: absolute; right: 60px' class='btn'></el-button>
            </div>
            <el-table
                :data='tableData'
                border
                class='table'
                ref='multipleTable'
                header-cell-class-name='table-header'
                @selection-change='handleSelectionChange'
            >
                <el-table-column prop='id' label='ID' width='55' align='center'></el-table-column>
                <el-table-column prop='date' label='提交时间'></el-table-column>
                <el-table-column prop='name' label='用户'></el-table-column>
                <el-table-column label='问题编号'>
                    <template #default='scope'><a :href='scope.row.url'>{{ scope.row.probID }}</a></template>
                </el-table-column>
                <el-table-column prop='lang' label='语言'></el-table-column>
                <el-table-column label='状态' align='center'>
                    <template #default='scope'>
                        <el-tag
                            :type="
                                scope.row.state === 'Accepted'
                                    ? 'success'
                                    : 'danger'
                            "
                        >{{ scope.row.state }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop='time' label='运行时间'></el-table-column>
                <el-table-column prop='memory' label='占用内存'>
                </el-table-column>
            </el-table>
            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchStatus } from '../../api/index';

export default {
    name: 'status',
    data() {
        return {
            query: {
                state: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            fetchStatus(this.query).then(res => {
                console.log(res);
                this.tableData = res.list;
                this.pageTotal = res.pageTotal || 50;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    /*font-size: 14px;*/
}

.mr10 {
    margin-right: 10px;
}

</style>
